﻿(function() {
  let imgBox = undefined
  initMouseDown()
  function initMouseDown () {
    renderdiv = document.createElement('div')
    renderdiv.setAttribute('id', 'renderdiv')
    const style = renderdiv.style
    style.position = 'fixed'
    style.top = style.left = 0
    style.zIndex = '99999999999999'
    style.width = window.innerWidth + 'px'
    style.height = window.innerHeight + 'px'
    // 使用canvas覆盖在原网页上
    // canvas不能影响原网页的响应时间，所以加上pointer-events: none;
    style.pointerEvents = 'none'
    document.body.append(renderdiv)

    // 添加图片div
    imgBox = document.createElement('img')
    imgBox.style.width = '20px'
    imgBox.style.height = '20px'
    imgBox.style.left = '-22px'
    imgBox.style.top = '-22px'
    imgBox.style.position = 'absolute'
    // imgBox.src = chrome.extension.getURL('icon.png')
    imgBox.src = 'https://static.enmonster.com/ebs/touch-icon-iphone-68.png'
    renderdiv.append(imgBox)
    // 添加监听事件
    addEvents()
  }
  function addEvents () {
    window.addEventListener('mousedown', mouseDown)
    window.addEventListener('mousemove', mousemove)
  }
  // 鼠标移动
  function mousemove (e) {
    if (e.clientX < 4 || e.clientY < 4) {
      imgBox.style.display = 'none'
    } else {
      imgBox.style.display = 'block'
    }
    imgBox.style.left = e.clientX + 5 + 'px'
    imgBox.style.top = e.clientY + 15 + 'px'
  }
  function mouseDown (e) {
    imgBox.style.left = e.clientX + 5 + 'px'
    imgBox.style.top = e.clientY + 15 + 'px'
  }
})()
